<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<body>
<script src="../js/vue.js"></script>
<!--el将html编译成vue的模板-->
<div id="app">
    <div id="sp">{{msg}}</div>

    <input type="button" value="修改数据" @click="changeData">
    <input type="text" v-model="msg">

    <!--    vue的生命周期分为三个阶段 1.初始化阶段 2.vue运行阶段 3.销毁阶段-->
</div>
</div>

<script>
    var app = new Vue({
        el: "#app",   //element:元素
        data: {        //data:数据 用来vue实例对象绑定一系列数据
            msg: "vue的生命周期",
        },
        methods: {
            changeData() {
                this.msg = "vue的生命周期详解"
            }
        },
        computed: {},
        beforeCreate() { //在执行这个函数的时候vue仅仅完成了内部的初始化
            console.log("asdasd输出 " + this.msg)
        },
        created() {  //第二个执行的函数,这时候就可以获取到data,methods,computed,vue自身数据已经完成了自定义初始化
            console.log("create输出 " + this.msg)
            // this.aa()
        },
        beforeMount() {//第三个生命周期执行的函数,在这个函数执行的时候vue实例仅仅是将el属性指向html编译成vue的模板,此时并没有完成模板复赋值
            console.log(document.getElementById("sp").innerHTML)//这时候没有
        },
        mounted() { //第四个生命周期执行的函数,在这个函数执行的时候vue实例会将data中的实例渲染到模板中,并形成了虚拟dom替换el
            console.log(document.getElementById("sp").innerHTML)//这时候已经替换了
        },
        beforeUpdate() { //第五个生命周期函数,在这个函数执行的时候data中的vue实例中数据发生改变,但是页面中的数据还没有改变
            console.log("beforeUpdate的this" + this.msg)//改变了
            console.log("beforeUpdate的document" + document.getElementById("sp").innerHTML)//改变前
        },
        updated() {//第六个执行的生命周期函数,在这个函数执行的时候,vue实例中的数据和页面中已经一直了
            console.log("updated的document" + document.getElementById("sp").innerHTML)//这改变后
            console.log("updated的this"+ this.msg)//这改变后
        },
        beforeDestroy() {//第七个执行的生命周期方法,在这个函数执行的时候,vue实例仅仅是开始销毁,此时还没有真正的销毁
            console.log("beforeDestroy" + this.msg)
        },
        destroy() {//第八个执行的生命周期方法 在这个函数执行的时候vue实例上的所有事件 监听 子组件等 全部清空
            console.log("destroy" + this.msg)
        }
    });
</script>
</body>
</html>
